<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>宏队列与微队列</title>
  </head>
  <body>
    <!-- 
        宏队列:[宏任务1,宏任务2......]
        微队列:[微任务1,微任务2......]

        规则：每次要执行宏队列里的任务之前，先看微队列里是否持有执行的微任务
        1、如果有，先执行微任务
        2、如果没有，按照宏队列任务的顺序，依次执行

     -->
    <img src="../promise的理解和使用/img/截屏2022-09-13 16.22.20.png" alt="" />
    <script>
      // 代码一
      /* setTimeout(() => {
        console.log('timeout')
      }, 0)
      //   对于前端人员来说，微任务只有Promise对象
      Promise.resolve(1).then((value) => console.log('成功1', value))
      Promise.resolve(2).then((value) => console.log('成功2', value))
      console.log('主线程')
      */

      //代码二
      /* 
      setTimeout(() => {
        console.log('timeout1')
      })
      setTimeout(() => {
        console.log('timeout2')
      })
      Promise.resolve(1).then((value) => console.log('成功1', value))
      //    成功1 1
      //   timeout1
      //   timeout2
      */

      //   代码三
      setTimeout(() => {
        console.log('timeout1')
        Promise.resolve(5).then((value) => {
          console.log('成功5')
        })
      })
      setTimeout(() => {
        console.log('timeout2')
      })

      Promise.resolve(3).then((value) => console.log('成功3'))
      Promise.resolve(4).then((value) => console.log('成功4'))
      // 成功3
      // 成功4
      // timeout1
      // 成功5
      // timeout2
    </script>
  </body>
</html>
